<template>
  <div class="diy-table">
    <el-table :data="tableData" style="width: 100%" :highlight-current-row="true" :stripe="true"  v-loading="loading" size="mini">
      <template v-for="item in tableHeader">
        <el-table-column
          v-if="item.prop === 'updateTimeArr'"
          :prop="item.prop"
          :label="item.label">
            <template scope="scope">
              <el-popover
                :disabled="!(scope.row.updateTimeArr && scope.row.updateTimeArr.length)"
                placement="right"
                v-model="scope.row.showUpdateTime"
                trigger="click">
                <span slot="reference" class="update-time">{{scope.row.updateTimeArr[0]}}</span>
                <div class="update-time-content">
                  {{$t('configLazyLoad.dicConfig.editHistory')}}
                  <br>
                  <template v-for="time in scope.row[item.prop]" >
                    {{time}}<br>
                  </template>
                </div>
              </el-popover>
            </template>
        </el-table-column>
        <el-table-column
          v-else-if="item.prop !== 'handel'"
          :prop="item.prop"
          :label="item.label">
        </el-table-column>
        <el-table-column
          v-else-if="item.prop === 'handel'"
          :label="item.label">
          <template scope="scope" >
            <span v-if="scope.row.accountId === 'system'">{{$t('callServiceSkillGroup.callServiceSkillGroup14')}}</span>
            <el-button style="margin-left:5px" v-if="scope.row.accountId === 'system' && scope.row.name !== '满意度调查选项'" @click="copy(scope.row)" type="text" size="small" class="updata">{{$t('public.copy')}}</el-button>
            <div v-else>
              <el-button @click="updata(scope.row)" type="text" size="small" class="updata">{{$t('configLazyLoad.intelligentQualityCheck.config')}}</el-button>
              <el-button @click="copy(scope.row)" v-if="scope.row.name !== '满意度调查选项'" type="text" size="small" class="updata">{{$t('public.copy')}}</el-button>
              <!--<el-button type="text" @click="edit(scope.row)" size="small" class="updata" v-if="scope.row.name !== '满意度调查选项'">修改</el-button>-->
            </div>
          </template>
        </el-table-column>
      </template>
    </el-table>
    <el-dialog
      :title="$t('configLazyLoad.dicConfig.copyDic')"
      :visible.sync="dialogVisible"
      width="30%">
      <el-form label-width="80px" :model="form">
        <el-form-item :label="$t('configLazyLoad.dicConfig.newDicName')">
          <el-input v-model.trim="form.dicName" maxlength="25"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button size="mini" @click="copyAndJump">{{$t('configLazyLoad.dicConfig.copyDicToDetail')}}</el-button>
        <el-button size="mini" type="primary" @click="copyDic">{{$t('public.copy')}}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  export default {
    data () {
      return {
        dialogVisible: false,
        rowData:{},
        form:{
          dicName: ''
        }
      }
    },
    props: {
      tableData: Array,
      tableHeader: Array,
      loading: {
        type: Boolean,
        default: false
      }
    },
    methods: {
      updata (val) {
        this.$emit('updata', val)
      },
      copy (val) {
        this.dialogVisible = true
        this.rowData = val
      },
      edit (val) {
        this.$emit('edit', val)
      },
      copyDic(){
        let data = {_id:this.rowData._id,name:this.form.dicName}
        this.$store.dispatch('copyOneAppDic',data).then(res=>{
          if(res && res.success){
            this.dialogVisible = false
            this.form.dicName = ''
            this.$message.success(this.$t('configLazyLoad.channel.copySucc'))
            this.$emit('copyJump',res.data)
          }
        })
      },
      copyAndJump(){
        let data = {_id:this.rowData._id,name:this.form.dicName}
        this.$store.dispatch('copyOneAppDic',data).then(res=>{
          if(res && res.success){
            this.dialogVisible = false
            this.form.dicName = ''
            this.$message.success(this.$t('configLazyLoad.channel.copySucc'))
            this.$emit('copyJump',res.data,true)
          }
        })
      }
    },
    computed: {
    },
    components: {
    }
  }
</script>
<style lang="stylus" scoped>
  @import "../../../../assets/common.styl"
  .diy-table
    margin-right -1px
    .updata
      cursor pointer
    .del
      color $c-pink
      cursor pointer
  .update-time
    &:hover
      cursor pointer
      color $c-main 
  .update-time-content
    font-size 12px
    max-height 350px
    overflow-y auto      
</style>
